<!-- MineGame -->
<template>
  <el-dialog v-if="props.show" :model-value="props.show" :title="'【MiniGame】' + data.game_name" top="8vh" width="54%"
    @close="onHideDetails" :close-on-press-escape="false" :destroy-on-close="true" :close-on-click-modal="false">
    <div v-loading="indexStore.moduleLoading">
      <div class="dialogMaxHeight padding20" :class="props.isDisableUser ? 'disableUser' : ''">
        <el-form ref="ruleFormRef" :model="data" :inline="true" :rules="rules" :scroll-to-error="true">
          <form-item title="游戏名称" value="game_name">
            <GameHeaderInfo :game_id="props.checkedItem.game_id" />
          </form-item>
          <form-item title="运营商" :pass="true" value="agent_id" v-show="data.agent_id && !indexStore.is_general_agent">
            <el-select v-model="data.agent_id" placeholder="请选择" filterable @change="chooseOperator">
              <el-option v-for="item in indexStore.agentArray" :key="item.value"
                :label="'【' + item.value + '】' + item.label" :value="item.value" />
            </el-select>
          </form-item>
          <form-item title="下注限制(USDT)" :pass="true" value="bet_min">
            <div class="width100 marginB10">Min：<el-input-number :min="0" :max="99999999999999999999" :precision="4"
                v-model="data.bet_min" placeholder="请输入最小下注额度" clearable controls-position="right" /></div>
            Max(min的倍数)：<el-input-number class="marginR5" :min="data.bet_min" :max="99999999999999999999" :precision="4"
              v-model="data.bet_max" placeholder="请输入最大下注额度" clearable controls-position="right" />
            最大奖励金额(min倍数)：<el-input-number :min="0" :max="99999999999999999999" :precision="0" v-model="data.max_award"
              placeholder="请输入下注派奖最大金额限制" clearable controls-position="right" />
            <div class="tipsTextRed"> (注:最大奖限制金额最好是最大下注的10倍)</div>
          </form-item>
          <form-item title="扣点率" :pass="true" value="point_dec">
            扣点率：<el-select v-model="data.point_dec" placeholder="请选择" :disabled="disabledGame('point_dec')">
              <el-option label="1%" :value="1" />
              <el-option label="2%" :value="2" />
              <el-option label="3%" :value="3" />
            </el-select>
            <span class="tipsTextRed">(注：哈希几率固定不变的，扣掉率主要扣奖励)</span>
            <div class="width100 marginT5">
              前端展示胜算使用的RTP：<el-select v-model="data.rtp_show" placeholder="请选择" :disabled="disabledGame('rtp_show')">
                <el-option v-for="item in data.rtpShow" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
            <span class="tipsTextRed width100">(只是用于前端奖励展示胜率使用，默认全部99，配置100，就是告诉玩家官方没有抽水)</span>
          </form-item>
          <form-item title="显示状态" :pass="true" value="button_option">
            <el-checkbox-group v-model="data.button_option" size="large">
              <el-checkbox-button label="设置" :value="1" />
              <el-checkbox-button label="统计" :value="2" />
              <el-checkbox-button label="余额" :value="4" />
              <el-checkbox-button label="公平性" :value="8" v-show="!data.gameTypeShow && data.is_hash == 1 ? true : false" />
            </el-checkbox-group>
            <span class="tipsText">(玩家游戏中显示状态)</span>
          </form-item>
          <form-item title="控制模式" value="is_hash">
            <el-radio-group v-model="data.is_hash" size="large" @change="chooseHash">
              <el-radio-button label="哈希算法" :value="1" />
              <el-radio-button label="套路控制算法" :value="2" />
            </el-radio-group>
            <span class="tipsText">(注：使用哈希公平算法，公平性按钮自动选择，所有套路控制配置失效。使用功能套路，公平性按钮不可选择)</span>
          </form-item>
          <form-item title="游戏内部RTP" :pass="true" value="default_rtp">
            <el-select v-model="data.default_rtp" placeholder="请选择" :disabled="data.is_hash == 1 ? true : false">
              <el-option v-for="item in data.rtpShow" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <span class="tipsTextRed">(99%=扣点1%，后端使用的真实RTP，如果是哈希这个没有用。)</span>
          </form-item>
          <form-item title="最大奖励倍数" value="is_ratio_limit">
            <el-radio-group v-model="data.is_ratio_limit" size="large" :disabled="data.is_hash == 1 ? true : false">
              <el-radio-button label="关闭" :value="0" />
              <el-radio-button label="开启" :value="1" />
            </el-radio-group>
            <div class="marginL20" v-show=data.is_ratio_limit>
              最大奖励倍数：<el-input-number :min="0" :max="100" :precision="0" v-model="data.max_ratio_limit"
                placeholder="请输入最大倍数显示倍率" clearable controls-position="right" />
            </div>
            <div class="tipsText ">(说明：下注=0，最大倍数的限制不生效，不勾选不生效)</div>
          </form-item>
          <form-item title="押注大小(USDT)" :pass="true" value="bet_range" :subtract="!props.isDisableUser"
            @addItem="addPressure" v-show="!data.gameTypeShow">
            <div class="flex margin5" v-for="(item, index) in data.betList" :key="index">
              <el-input-number :min="0" :max="99999999999999999999" :precision="0" class="width150" v-model="item.num"
                placeholder="请输入押注大小" clearable controls-position="right" />
              <div v-show="!props.isDisableUser" class="reduce-btn reduce-btn_new marginL5"
                @click="reducePressure(index)">-</div>
            </div><span class="tipsTextRed">(最小下注的倍率)</span>
            <span class="tipsText width100">(玩家可选择的押注额度)</span>
          </form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer" v-show="!props.isDisableUser">
        <el-button type="info" @click="onHideDetails">取 消</el-button>
        <el-button type="primary" @click="gameSet(ruleFormRef)" v-loading="indexStore.moduleLoading">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import GameHeaderInfo from '@/components/FormItem/GameHeaderInfo.vue'
import { throttle, selectToLabel } from '@/utils/index'
import { getOperatorMineGame, editMineGame } from '@/api/game'

import { useStore } from '@/stores/index'
const indexStore = useStore()

const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  isDisableUser: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  checkedItem: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

watch(
  () => [props.checkedItem, props.show],
  async (value) => {
    if (value[0]) {
      Object.assign(data, props.checkedItem)
    }
    if (value[1]) {
      chooseOperator(props.checkedItem.agent_id, props.checkedItem.game_id)
    }
  },
)

const data = reactive({
  id: 0,
  agent_id: 0,
  game_id: 0,
  game_name: '',
  bet_min: 0,
  bet_max: 0,
  betList: [] as any[], //下注列表
  max_award: 0, //下注派奖最大金额限制
  point_dec: 0, //扣点率
  rtp_show: 0, //前端显示RTP
  button_option: [1, 2, 4, 8], //显示状态 1设置 2统计 4余额 8公平性
  is_hash: 1, //控制模式 1hash算法 2套路控制算法(该控制-公平性按钮默认不显示)
  default_rtp: 0, //游戏内部RTP
  is_ratio_limit: 0, //是否最大倍数限制
  max_ratio_limit: 0, //最大倍数显示倍率
  rtpShow: [ //RTP的选择区间
    { label: '75%', value: 75 },
    { label: '80%', value: 80 },
    { label: '85%', value: 85 },
    { label: '88%', value: 88 },
    { label: '90%', value: 90 },
    { label: '91%', value: 91 },
    { label: '92%', value: 92 },
    { label: '93%', value: 93 },
    { label: '94%', value: 94 },
    { label: '95%', value: 95 },
    { label: '96%', value: 96 },
    { label: '97%', value: 97 },
    { label: '98%', value: 98 },
    { label: '99%', value: 99 },
    { label: '100%', value: 100 },
  ],
  gameTypeShow: props.checkedItem.game_id > 12000000 ? true : false,
  // 那些游戏禁止操作-扣点率【负】
  pointDecShowList: [
    // Mini Game（state)
    { label: '【2000003】Dice', value: 10000003 },
    { label: '【2000008】幸运轮', value: 10000008 },
    { label: '【2000009】高低牌', value: 10000009 },
    { label: '【20000010】21点黑杰克', value: 120000010 },
    { label: '【20000011】钻石', value: 10000011 },
    { label: '【20000013】轮盘', value: 10000013 },
    // spribe data.game_id>13000000为Spribe
    { label: '【3000002】炸弹', value: 13000002 },
    { label: '【3000003】Dice', value: 13000003 },
    { label: '【3000005】高低牌', value: 13000005 },
    { label: '【3000006】高低牌', value: 13000006 },
  ],
  // 那些游戏展示-前端RTP【正】
  rptShowList: [
    { label: '【2000001】弹珠', value: 10000001 },
  ],
})

// 选择运营商
const chooseOperator = async (id: number, game_id: number) => {
  indexStore.setModuleLoading(true)
  let res = await getOperatorMineGame({
    agent_id: id, game_id: game_id
  })
  Object.assign(data, res.data)
  nextTick(() => {
    indexStore.setModuleLoading(false)
  })
}

// 游戏封禁操作
const disabledGame = (type: string) => {
  // 那些游戏禁止操作扣点率【负】
  if (type == 'point_dec') {
    if (selectToLabel(data.pointDecShowList, data.game_id)) {
      return true
    } else {
      false
    }
  }
  // 那些游戏展示前端RTP【正】
  if (type == 'rtp_show') {
    if (selectToLabel(data.rptShowList, data.game_id)) {
      return true
    } else {
      false
    }
  }
}

// 控制模式 - 显示状态
const chooseHash = (value: number) => {
  if (value == 1) {
    data.button_option = [1, 2, 4, 8]
  } else {
    data.button_option = [1, 2, 4]
  }
}

// 设置
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<typeof data>>({
  max_award: [{ required: true, message: '请输入下注派奖最大金额限制', trigger: 'blur' }],
  bet_max: [{ required: true, message: '请输入最大下注金额', trigger: 'blur' }],
})
const gameSet = throttle(async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await editMineGame(data);
      ElMessage.success('修改成功')
      emit('onHideDetails', true)
    }
  })
}, 3000)

// 重置
const emit = defineEmits(['onHideDetails'])
const onHideDetails = () => {
  emit('onHideDetails', false)
}

// 新增押注倍数
const addPressure = () => {
  data.betList.push({ num: 0 })
}
// 减少押注倍数
const reducePressure = (index: number) => {
  if (!index && data.betList.length == 1) {
    return ElMessage.error('最少保留一个压注额度！')
  }
  data.betList.splice(index, 1)
}
</script>

<style scoped lang="scss">
.reduce-btn_new {
  position: absolute;
  right: 5px;
  bottom: -3px;
}
</style>